<template>
  <div ref="chart" style="height: 100%" />
</template>
<script>
import { Chart, registerShape } from '@antv/g2';
export default {
  name: 'WorkingAreaChart',
  props: {
    data: { type: Array, required: true },
    x: { type: String, default: 'x' },
    y: { type: String, default: 'y' },
    s: { type: String, default: 's' },
    color: { type: Array, required: true },
    sText: { type: Array, required: true }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    data() {
      this.updateData();
    }
  },
  mounted() {
    this.initChart();
    this.drawChart();
  },
  methods: {
    initChart() {
      const ref = this.$refs.chart;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });
    },
    drawChart() {
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      // const s = this.s;
      const data1 = this.data.filter((item) => item.s === this.sText[0]);
      const data2 = this.data.filter((item) => item.s === this.sText[1]);
      registerShape('area', 'reverse-area', {
        getPoints(cfg) {
          const x = cfg.x;
          const y = cfg.y;
          const y0 = 1;
          return { x, y, y0 };
        },
        draw(cfg, container) {
          const points = cfg.points;
          const path = [];
          points.forEach((item) => {
            path.push(['M', item.x, item.y0]);
            path.push(['L', item.x, item.y]);
            path.push(['Z']);
          });
          const area = container.addShape('path', {
            path,
            ...cfg.defaultStyle
          });
          return area;
        }
      });
      this.chart.data(data1);
      this.chart.scale(x, {
        range: [0, 1]
      });
      this.chart.scale(y, {
        min: 0,
        max: 10
      });
      this.chart.tooltip(false);
      // x轴
      this.chart.axis(x, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          autoHide: false,
          offset: 2 * ratio
        },
        line: null,
        tickLine: null
      });
      // y轴
      this.chart.axis(y, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          offset: 5 * ratio
        },
        grid: null,
        line: {
          style: {
            lineWidth: 1 * ratio,
            stroke: 'rgba(255, 255, 255, 0.5)'
          }
        }
      });
      this.chart.legend(false);
      this.chart
        .area()
        .position(`${x}*${y}`)
        .shape('smooth')
        .color(this.color[0])
        .animate({
          appear: {
            animation: 'fade-in',
            delay: 0,
            duration: 2000
          },
          update: {
            animation: 'fade-in',
            delay: 0,
            duration: 2000
          }
        });
      const view = this.chart.createView();
      view.axis(false);
      view.data(data2);
      view
        .area()
        .position(`${x}*${y}`)
        .shape('reverse-area')
        .color(this.color[1])
        .animate({
          appear: {
            animation: 'fade-in',
            delay: 0,
            duration: 2000
          },
          update: {
            animation: 'fade-in',
            delay: 0,
            duration: 2000
          }
        });
      this.chart.render();
    },
    updateData() {
      this.chart.changeData(this.data);
    }
  }
};
</script>
